import React from 'react'

const Prototype: React.FC = () => {
  return (
    <div className="min-h-screen bg-[#f0f2f5] py-8">
      <div className="container mx-auto">
        <h1 className="text-4xl font-bold mb-8 text-center">AI Content Platform - Interactive Prototype</h1>
        <p className="text-center mb-10 max-w-3xl mx-auto">
          High-fidelity prototype for an AI-generated content platform featuring bikini photos,
          cosplay, K-POP dance videos, AI companions, ASMR content, and premium unlockable experiences.
        </p>
        
        <div className="flex flex-wrap justify-center gap-8">
          {/* Home Screen */}
          <div className="text-center">
            <div className="w-[375px] h-[812px] rounded-[40px] overflow-hidden shadow-lg relative bg-white border-[10px] border-[#121212] inline-block">
              <div className="absolute w-[180px] h-[30px] bg-[#121212] top-0 left-1/2 -translate-x-1/2 rounded-b-[15px] z-10"></div>
              <iframe 
                src="/" 
                className="w-full h-full border-0"
                title="Home Screen"
              ></iframe>
            </div>
            <div className="mt-4 text-lg font-bold">Home Screen</div>
          </div>
          
          {/* Categories Screen */}
          <div className="text-center">
            <div className="w-[375px] h-[812px] rounded-[40px] overflow-hidden shadow-lg relative bg-white border-[10px] border-[#121212] inline-block">
              <div className="absolute w-[180px] h-[30px] bg-[#121212] top-0 left-1/2 -translate-x-1/2 rounded-b-[15px] z-10"></div>
              <iframe 
                src="/discover" 
                className="w-full h-full border-0"
                title="Categories Screen"
              ></iframe>
            </div>
            <div className="mt-4 text-lg font-bold">Categories</div>
          </div>
          
          {/* AI Companion Screen */}
          <div className="text-center">
            <div className="w-[375px] h-[812px] rounded-[40px] overflow-hidden shadow-lg relative bg-white border-[10px] border-[#121212] inline-block">
              <div className="absolute w-[180px] h-[30px] bg-[#121212] top-0 left-1/2 -translate-x-1/2 rounded-b-[15px] z-10"></div>
              <iframe 
                src="/ai-companion" 
                className="w-full h-full border-0"
                title="AI Companion Screen"
              ></iframe>
            </div>
            <div className="mt-4 text-lg font-bold">AI Companion</div>
          </div>
          
          {/* ASMR Content Screen */}
          <div className="text-center">
            <div className="w-[375px] h-[812px] rounded-[40px] overflow-hidden shadow-lg relative bg-white border-[10px] border-[#121212] inline-block">
              <div className="absolute w-[180px] h-[30px] bg-[#121212] top-0 left-1/2 -translate-x-1/2 rounded-b-[15px] z-10"></div>
              <iframe 
                src="/asmr" 
                className="w-full h-full border-0"
                title="ASMR Content Screen"
              ></iframe>
            </div>
            <div className="mt-4 text-lg font-bold">ASMR Content</div>
          </div>
          
          {/* Profile Screen */}
          <div className="text-center">
            <div className="w-[375px] h-[812px] rounded-[40px] overflow-hidden shadow-lg relative bg-white border-[10px] border-[#121212] inline-block">
              <div className="absolute w-[180px] h-[30px] bg-[#121212] top-0 left-1/2 -translate-x-1/2 rounded-b-[15px] z-10"></div>
              <iframe 
                src="/profile" 
                className="w-full h-full border-0"
                title="Profile Screen"
              ></iframe>
            </div>
            <div className="mt-4 text-lg font-bold">Profile/Account</div>
          </div>
          
          {/* Premium Content Screen */}
          <div className="text-center">
            <div className="w-[375px] h-[812px] rounded-[40px] overflow-hidden shadow-lg relative bg-white border-[10px] border-[#121212] inline-block">
              <div className="absolute w-[180px] h-[30px] bg-[#121212] top-0 left-1/2 -translate-x-1/2 rounded-b-[15px] z-10"></div>
              <iframe 
                src="/premium" 
                className="w-full h-full border-0"
                title="Premium Content Screen"
              ></iframe>
            </div>
            <div className="mt-4 text-lg font-bold">Premium Content</div>
          </div>
          
          {/* Settings Screen */}
          <div className="text-center">
            <div className="w-[375px] h-[812px] rounded-[40px] overflow-hidden shadow-lg relative bg-white border-[10px] border-[#121212] inline-block">
              <div className="absolute w-[180px] h-[30px] bg-[#121212] top-0 left-1/2 -translate-x-1/2 rounded-b-[15px] z-10"></div>
              <iframe 
                src="/profile/settings" 
                className="w-full h-full border-0"
                title="Settings Screen"
              ></iframe>
            </div>
            <div className="mt-4 text-lg font-bold">Settings</div>
          </div>
        </div>
      </div>
    </div>
  )
}

export default Prototype 